<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
    <section class="aui-chat" id="chat-list">


    </section>

</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript">
var toast = new auiToast();
apiready = function(){
    var targetId = api.pageParam.targetId;
     $api.setStorage("chat_index", 0);
     load();
     //上拉翻页
     api.addEventListener({
         name : 'scrolltobottom'
     }, function(ret, err) {
         $api.setStorage("chat_index", $api.getStorage("chat_index") - 0 + 1);
         load();
     });
 }

//资讯列表加载
 function load(first, index2) {
     api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '拼命加载中...',
        text: '不如喝茶去...',
        modal: false
     });
     var index = $api.getStorage("chat_index");
     var username = $api.getStorage("username");
     var ryId = $api.getStorage("ryId");
     var targetId = api.pageParam.targetId;
     //alert(index);
     var url = ServeUrl + "m=Index&a=chatHistory&pageIndex=" + index + "&pageCount=15&targetId="+targetId+"&ryId="+ryId;
     ajaxRequest(url, 'get', '', function(data) {
         dealWithHtml(data, first, index);
     });

 }

 function ajaxRequest(url, method, datas, callBack) {
     api.ajax({
         url : url,
         method : method,
         cache : false,
         timeout : 30,
         dataType : 'json',
         data : {
             values : datas
         }
     }, function(ret, err) {
         if (ret.data) {
             callBack(ret, err);
         } else {
           toast.success({
              title:"已加载所有记录",
              duration:2000
          });
             api.hideProgress();
         }
     });
 }

//字符串拼接
 function dealWithHtml(data, first, index) {
    //alert(JSON.stringify(data));
    var username = $api.getStorage('username');
    var ryId = $api.getStorage('ryId');
    for (var i = 0; i < data.data.length; i++) {
        var html = "";
        if(data.data[i].senderUserId==ryId){
            html+='<div class="aui-chat-item aui-chat-right">'
            html+='<div class="aui-chat-media">'
            html+='<img src="'+ServeIp+'include/data/headImg/'+data.data[i].user_img+'" />'
            html+='</div>'
            html+='<div class="aui-chat-inner">'
            html+='<div class="aui-chat-name">'+data.data[i].cn_name+'</div>'
            if(data.data[i].objectName=="RC:TxtMsg"){
                txt = data.data[i].content.replace(reg, function(a, b) {
                        return face[a] ? face[a] : a;
                });
                html+='<div class="aui-chat-content">'
                html+='<div class="aui-chat-arrow"></div>'+txt+'</div>'
            }else if (data.data[i].objectName=="RC:ImgMsg") {
                html+='<div class="aui-chat-content">'
                html+='<div class="aui-chat-arrow"></div><img src="'+data.data[i].content+'" data-preview-src="" data-preview-group="1"  /></div>' //imageUrl
            }else if (data.data[i].objectName=="RC:VcMsg") {
                html+='<span class="time-font">＂</span><div class="aui-chat-content">'
                html+='<div class="aui-chat-arrow"></div><img src="../image/stop_right.png" height="25rem" width="32rem" onclick="playVoice(this,'+"'"+data.data[i].content+"',1"+')"/></div>' //imageUrl
            }
            //alert(data[i].imageUrl);
            html+='</div>'
            html+='</div>';
        }else{
            html+='<div class="aui-chat-item aui-chat-left">'
            html+='<div class="aui-chat-media">'
            html+='<img src="'+ServeIp+'include/data/headImg/'+data.data[i].user_img+'" />'
            html+='</div>'
            html+='<div class="aui-chat-inner">'
            html+='<div class="aui-chat-name">'+data.data[i].cn_name+'</div>'
            html+='<div class="aui-chat-content">'
            if(data.data[i].objectName=="RC:TxtMsg"){
                txt = data.data[i].content.replace(reg, function(a, b) {
                        return face[a] ? face[a] : a;
                });
                html+='<div class="aui-chat-arrow"></div>'+txt+'</div>'
            }else if (data.data[i].objectName=="RC:ImgMsg") {
                html+='<div class="aui-chat-arrow" style="width:80rem;"></div><img src="'+data.data[i].content+'" data-preview-src="" data-preview-group="1" /></div>' //imageUrl
            }else if (data.data[i].objectName=="RC:VcMsg") {
                html+='<div class="aui-chat-arrow"></div><img src="../image/stop_left.png" height="25rem" width="32rem" onclick="playVoice(this,'+"'"+data.data[i].content+"'"+',2)"/></div>' //imageUrl
                html+= '<span class="time-font">&nbsp;&nbsp;&nbsp;&nbsp;   ＂</span>'
            }
            html+='</div>'
            html+='</div>';
        }
        $("#chat-list").append(html);
    }
    api.hideProgress();

 }

 //表情符号转换
 var reg = /\[.+?\]/g;
 var face = {
         '[微笑]' : '<span><img src="../res/ChatBox/emotion/Expression_1.png"  width="28"/></span>',
         '[撇嘴]' : '<span><img src="../res/ChatBox/emotion/Expression_2.png"  width="28" /></span>',
         '[色]' : '<span><img src="../res/ChatBox/emotion/Expression_3.png"  width="28" /></span>',
         '[发呆]' : '<span><img src="../res/ChatBox/emotion/Expression_4.png"  width="28" /></span>',
         '[得意]' : '<span><img src="../res/ChatBox/emotion/Expression_5.png"  width="28" /></span>',
         '[流泪]' : '<span><img src="../res/ChatBox/emotion/Expression_6.png"  width="28" /></span>',
         '[害羞]' : '<span><img src="../res/ChatBox/emotion/Expression_7.png"  width="28" /></span>',
         '[闭嘴]' : '<span><img src="../res/ChatBox/emotion/Expression_8.png"  width="28" /></span>',
         '[睡]' : '<span><img src="../res/ChatBox/emotion/Expression_9.png"  width="28" /></span>',
         '[大哭]' : '<span><img src="../res/ChatBox/emotion/Expression_10.png"  width="28"/></span>',
         '[尴尬]' : '<span><img src="../res/ChatBox/emotion/Expression_11.png"  width="28"/></span>',
         '[发怒]' : '<span><img src="../res/ChatBox/emotion/Expression_12.png"  width="28"/></span>',
         '[调皮]' : '<span><img src="../res/ChatBox/emotion/Expression_13.png"  width="28" /></span>',
         '[呲牙]' : '<span><img src="../res/ChatBox/emotion/Expression_14.png"  width="28" /></span>',
         '[惊讶]' : '<span><img src="../res/ChatBox/emotion/Expression_15.png"  width="28" /></span>',
         '[难过]' : '<span><img src="../res/ChatBox/emotion/Expression_16.png"  width="28" /></span>',
         '[酷]' : '<span><img src="../res/ChatBox/emotion/Expression_17.png"  width="28" /></span>',
         '[冷汗]' : '<span><img src="../res/ChatBox/emotion/Expression_18.png"  width="28" /></span>',
         '[抓狂]' : '<span><img src="../res/ChatBox/emotion/Expression_19.png"  width="28" /></span>',
         '[吐]' : '<span><img src="../res/ChatBox/emotion/Expression_20.png"  width="28" /></span>',
         '[偷笑]' : '<span><img src="../res/ChatBox/emotion/Expression_21.png"  width="28" /></span>',
         '[愉快]' : '<span><img src="../res/ChatBox/emotion/Expression_22.png"  width="28" /></span>',
         '[白眼]' : '<span><img src="../res/ChatBox/emotion/Expression_23.png"  width="28" /></span>',
         '[傲慢]' : '<span><img src="../res/ChatBox/emotion/Expression_24.png"  width="28" /></span>',
         '[饥饿]' : '<span><img src="../res/ChatBox/emotion/Expression_25.png"  width="28" /></span>',
         '[困]' : '<span><img src="../res/ChatBox/emotion/Expression_26.png"  width="28" /></span>',
         '[恐惧]' : '<span><img src="../res/ChatBox/emotion/Expression_27.png"  width="28" /></span>',
         '[流汗]' : '<span><img src="../res/ChatBox/emotion/Expression_28.png"  width="28" /></span>',
         '[憨笑]' : '<span><img src="../res/ChatBox/emotion/Expression_29.png"  width="28" /></span>',
         /*从这*/
         '[悠闲]' : '<span><img src="../res/ChatBox/emotion/Expression_30.png"  width="28" /></span>',
         '[奋斗]' : '<span><img src="../res/ChatBox/emotion/Expression_31.png"  width="28" /></span>',
         '[咒骂]' : '<span><img src="../res/ChatBox/emotion/Expression_32.png"  width="28" /></span>',
         '[疑问]' : '<span><img src="../res/ChatBox/emotion/Expression_33.png"  width="28" /></span>',
         '[嘘]' : '<span><img src="../res/ChatBox/emotion/Expression_34.png"  width="28" /></span>',
         '[晕]' : '<span><img src="../res/ChatBox/emotion/Expression_35.png"  width="28" /></span>',
         '[疯了]' : '<span><img src="../res/ChatBox/emotion/Expression_36.png"  width="28" /></span>',
         '[衰]' : '<span><img src="../res/ChatBox/emotion/Expression_37.png"  width="28" /></span>',
         '[骷髅]' : '<span><img src="../res/ChatBox/emotion/Expression_38.png"  width="28" /></span>',
         '[敲打]' : '<span><img src="../res/ChatBox/emotion/Expression_39.png"  width="28"/></span>',
         '[再见]' : '<span><img src="../res/ChatBox/emotion/Expression_40.png"  width="28"/></span>',
         '[擦汗]' : '<span><img src="../res/ChatBox/emotion/Expression_41.png"  width="28"/></span>',
         '[抠鼻]' : '<span><img src="../res/ChatBox/emotion/Expression_42.png"  width="28" /></span>',
         '[鼓掌]' : '<span><img src="../res/ChatBox/emotion/Expression_43.png"  width="28" /></span>',
         '[糗大了]' : '<span><img src="../res/ChatBox/emotion/Expression_44.png"  width="28" /></span>',
         '[坏笑]' : '<span><img src="../res/ChatBox/emotion/Expression_45.png"  width="28" /></span>',
         '[左哼哼]' : '<span><img src="../res/ChatBox/emotion/Expression_46.png"  width="28" /></span>',
         '[右哼哼]' : '<span><img src="../res/ChatBox/emotion/Expression_47.png"  width="28" /></span>',
         '[哈欠]' : '<span><img src="../res/ChatBox/emotion/Expression_48.png"  width="28" /></span>',
         '[鄙视]' : '<span><img src="../res/ChatBox/emotion/Expression_49.png"  width="28" /></span>',
         '[委屈]' : '<span><img src="../res/ChatBox/emotion/Expression_50.png"  width="28" /></span>',
         '[快哭了]' : '<span><img src="../res/ChatBox/emotion/Expression_51.png"  width="28" /></span>',
         '[阴险]' : '<span><img src="../res/ChatBox/emotion/Expression_52.png"  width="28" /></span>',
         '[亲亲]' : '<span><img src="../res/ChatBox/emotion/Expression_53.png"  width="28" /></span>',
         '[吓]' : '<span><img src="../res/ChatBox/emotion/Expression_54.png"  width="28" /></span>',
         '[可怜]' : '<span><img src="../res/ChatBox/emotion/Expression_55.png"  width="28" /></span>',
         '[菜刀]' : '<span><img src="../res/ChatBox/emotion/Expression_56.png"  width="28" /></span>',
         '[西瓜]' : '<span><img src="../res/ChatBox/emotion/Expression_57.png"  width="28" /></span>',
         '[啤酒]' : '<span><img src="../res/ChatBox/emotion/Expression_58.png"  width="28" /></span>',
         '[篮球]' : '<span><img src="../res/ChatBox/emotion/Expression_59.png"  width="28" /></span>',
         '[乒乓]' : '<span><img src="../res/ChatBox/emotion/Expression_60.png"  width="28" /></span>',
         '[咖啡]' : '<span><img src="../res/ChatBox/emotion/Expression_61.png"  width="28" /></span>',
         '[饭]' : '<span><img src="../res/ChatBox/emotion/Expression_62.png"  width="28" /></span>',
         '[猪头]' : '<span><img src="../res/ChatBox/emotion/Expression_63.png"  width="28" /></span>',
         '[玫瑰]' : '<span><img src="../res/ChatBox/emotion/Expression_64.png"  width="28" /></span>',
         '[凋谢]' : '<span><img src="../res/ChatBox/emotion/Expression_65.png"  width="28" /></span>',
         '[嘴唇]' : '<span><img src="../res/ChatBox/emotion/Expression_66.png"  width="28" /></span>',
         '[爱心]' : '<span><img src="../res/ChatBox/emotion/Expression_67.png"  width="28" /></span>',
         '[心碎]' : '<span><img src="../res/ChatBox/emotion/Expression_68.png"  width="28"/></span>',
         '[蛋糕]' : '<span><img src="../res/ChatBox/emotion/Expression_69.png"  width="28"/></span>',
         '[闪电]' : '<span><img src="../res/ChatBox/emotion/Expression_70.png"  width="28"/></span>',
         '[炸弹]' : '<span><img src="../res/ChatBox/emotion/Expression_71.png"  width="28" /></span>',
         '[刀]' : '<span><img src="../res/ChatBox/emotion/Expression_72.png"  width="28" /></span>',
         '[足球]' : '<span><img src="../res/ChatBox/emotion/Expression_73.png"  width="28" /></span>',
         '[瓢虫]' : '<span><img src="../res/ChatBox/emotion/Expression_74.png"  width="28" /></span>',
         '[便便]' : '<span><img src="../res/ChatBox/emotion/Expression_75.png"  width="28" /></span>',
         '[月亮]' : '<span><img src="../res/ChatBox/emotion/Expression_76.png"  width="28" /></span>',
         '[太阳]' : '<span><img src="../res/ChatBox/emotion/Expression_77.png"  width="28" /></span>',
         '[礼物]' : '<span><img src="../res/ChatBox/emotion/Expression_78.png"  width="28" /></span>',
         '[拥抱]' : '<span><img src="../res/ChatBox/emotion/Expression_79.png"  width="28" /></span>',
         '[强]' : '<span><img src="../res/ChatBox/emotion/Expression_80.png"  width="28" /></span>',
         '[弱]' : '<span><img src="../res/ChatBox/emotion/Expression_81.png"  width="28" /></span>',
         '[握手]' : '<span><img src="../res/ChatBox/emotion/Expression_82.png"  width="28" /></span>',
         '[胜利]' : '<span><img src="../res/ChatBox/emotion/Expression_83.png"  width="28" /></span>',
         '[抱拳]' : '<span><img src="../res/ChatBox/emotion/Expression_84.png"  width="28" /></span>',
         '[勾引]' : '<span><img src="../res/ChatBox/emotion/Expression_85.png"  width="28" /></span>',
         '[拳头]' : '<span><img src="../res/ChatBox/emotion/Expression_86.png"  width="28" /></span>',
         '[差劲]' : '<span><img src="../res/ChatBox/emotion/Expression_87.png"  width="28" /></span>',
         '[爱你]' : '<span><img src="../res/ChatBox/emotion/Expression_88.png"  width="28" /></span>',
         '[NO]' : '<span><img src="../res/ChatBox/emotion/Expression_89.png"  width="28" /></span>',
         '[OK]' : '<span><img src="../res/ChatBox/emotion/Expression_90.png"  width="28" /></span>',
         '[爱情]' : '<span><img src="../res/ChatBox/emotion/Expression_91.png"  width="28" /></span>',
         '[飞吻]' : '<span><img src="../res/ChatBox/emotion/Expression_92.png"  width="28" /></span>',
         '[跳跳]' : '<span><img src="../res/ChatBox/emotion/Expression_93.png"  width="28" /></span>',
         '[发抖]' : '<span><img src="../res/ChatBox/emotion/Expression_94.png"  width="28" /></span>',
         '[怄火]' : '<span><img src="../res/ChatBox/emotion/Expression_95.png"  width="28" /></span>',
         '[转圈]' : '<span><img src="../res/ChatBox/emotion/Expression_96.png"  width="28" /></span>',
         '[磕头]' : '<span><img src="../res/ChatBox/emotion/Expression_97.png"  width="28"/></span>',
         '[回头]' : '<span><img src="../res/ChatBox/emotion/Expression_98.png"  width="28"/></span>',
         '[跳绳]' : '<span><img src="../res/ChatBox/emotion/Expression_99.png"  width="28"/></span>',
         '[投降]' : '<span><img src="../res/ChatBox/emotion/Expression_100.png"  width="28" /></span>',
         '[激动]' : '<span><img src="../res/ChatBox/emotion/Expression_101.png"  width="28" /></span>',
         '[街舞]' : '<span><img src="../res/ChatBox/emotion/Expression_102.png"  width="28" /></span>',
         '[献吻]' : '<span><img src="../res/ChatBox/emotion/Expression_103.png"  width="28" /></span>',
         '[左太极]' : '<span><img src="../res/ChatBox/emotion/Expression_104.png"  width="28" /></span>',
         '[右太极]' : '<span><img src="../res/ChatBox/emotion/Expression_105.png"  width="28" /></span>'
 };
</script>
</html>
